<template>
  <view class="login-container">
    <view class="top">
      <image
        class="logo"
        src="https://ltjt.sjzballsportpark.com/statics/tyc/static/login_logo.png"
      ></image>
      <text class="title">勇石体育</text>
    </view>
    <view class="footer">
      <view class="footer-btn" @click="loginFun">
        <image v-if="false"
          src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-weixin.png"
        ></image>
        <text>快捷登录</text>
      </view>
      <view class="bottom" @click="radioChange">
        <view class="form-radio" :class="{ active: radioChecked }"></view>
        勾选即代表同意<text @click.stop="showDocFun(1)">用户注册协议</text
        >和<text @click.stop="showDocFun(2)">隐私政策</text>
      </view>
    </view>
    <u-popup
      :backgroundColor="'#ffffff'"
      :show="showProp"
      @close="closePopup"
      :transStyle="{
        borderTopLeftRadius: '40rpx',
        borderTopRightRadius: '40rpx',
        overflow: 'hidden',
      }"
    >
      <view class="popup-content">
        <image
          class="popup-close"
          src="https://ltjt.sjzballsportpark.com/statics/tyc/static/delete2.png"
          @click="closePopup"
        ></image>
        <view class="title">用户协议</view>
        <view class="text">
          <rich-text :nodes="doc"></rich-text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { login } from "@/config/api.js";
import { mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      showProp: false,
      showDoc: false,
      radioChecked: false,
      doc: "",
      isSubmitting: false,
    };
  },
  computed: {},
  onShow(res) {
    uni.hideHomeButton();
  },
  methods: {
    ...mapActions({
      userInfo_onInit: "userInfo/onInit",
    }),
    loginFun() {
      if (!this.radioChecked) {
        uni.showToast({
          title: "请先同意用户注册协议和隐私政策！",
          icon: "none",
        });
        return;
      }
      if (this.isSubmitting) return;
      this.isSubmitting = true;
      return login()
        .then((res) => {
          this.userInfo_onInit();
          uni.navigateBack({
            delta: 1,
          });
        })
        .catch(() => {
          this.isSubmitting = false;
        });
    },
    radioChange() {
      console.log("this.radioChecked", this.radioChecked);
      this.radioChecked = !this.radioChecked;
      console.log("this.radioChecked", this.radioChecked);
    },
    closePopup() {
      this.showProp = false;
    },
    showDocFun(type) {
      if (type == 1) {
        this.doc = `<p>  本软件尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本软件会按照本隐私权政策的规定使用和披露您的个人信息。但本软件将以高度的勤勉、审慎义务对待这些信息。</p><p>    除本隐私权政策另有规定外，在未征得您事先许可的情况下，本软件不会将这些信息对外披露或向第三方提供。本软件会不时更新本隐私权政策。</p><p>    您在同意本软件服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本软件服务使用协议不可分割的一部分。</p><p><strong>   1. 我们如何搜集您的信息?</strong></p><p>   我们提供服务时，可能会收集、储存和使用下列信息:</p><p>   1.1您提供的信息</p><p>   (1)您在注册账户或使用我们的服务时，向我们提供的相关个人信息，例如您的电子电话号码等信息。如果您想充分使用我们提供的各种分享功能，可能还需要创建公开显示的个人资料，其中可能会包含您的姓名和照片。</p><p>   (2)您通过我们的服务向其他方提供的共享信息，以及您使用我们的服务时上传、提交、存储、发送或接收的信息。</p><p>   1.2您在使用服务过程中，我们获取的信息</p><p>   我们会收集您使用的服务以及使用方式的信息，此类信息包括:</p><p>   (1)设备信息:我们会收集设备专用的信息，例如您的硬件型号、操作系统信息、移动设备版本、设备识别码、屏幕分辨率等信息。                         </p><p>   (2)日志信息</p><p>   A设备或软件信息，例如您的移动设备、网页浏览器或用于接入我们服务的其他程序所提供的配置信息、您的IP地址和移动设备所用的版本和设备识别码;</p><p>   B.在使用我们服务时搜索或浏览的信息，例如您使用的网页搜索词语、访问的社交媒体页面URL地址，以及您在使用我们服务时浏览或要求提供的其他信息和内容详情;</p><p>   (3)IP地址</p><p>   A.有关您曾使用的移动应用(APP)和其他软件的信息，以及您曾经使用该等移动应用和软件的信息;</p><p>   B.您通过我们的服务分享的内容所包含的信息(元数据)，例如拍摄或上传的共享照片或录像的日期、时间或地点等。</p><p><strong>   2.我们如何使用您的信息</strong></p><p>   我们可能将上述收集的信息用作以下用途:</p><p>   (1)向您提供服务;</p><p>   (2)在我们提供服务时，用于身份验证、客户服务、安全防范、存档和备份用途，确保我们向您提供的产品和服务的安全性;</p><p>   (3)帮助我们设计新服务，改善我们现有服务;</p><p>   (4)使我们更加了解您如何接入和使用我们的服务，从而针对性地回应您的个性化需求，例如语言设定、位置设定、个性化的帮助服务和指示，或对您和其他用户作出其他方面的回应;</p><p>   (5)向您提供与您更加相关的广告以替代普遍投放的广告;</p><p>   (6)执行软件验证、升级服务;</p><p>   (7)应用户特殊要求而提供特定服务时，需要将信息提供给我们的关联公司、第三方或其他用户;</p><p>   (8)其他有利于用户和App运营者利益且不违反任何强制性法律法规的情况。</p><p>   (9)让您参与有关我们产品和服务的调查</p><p><strong>   3.我们承诺</strong></p><p>   (1)我们不会根据敏感类别(例如种族、宗教、性取向或健康状况)向您展示个性化广告;</p><p>   (2)我们不会与广告主分享可用于识别您个人身份的信息，例如您的姓名(除非经您授权同意);</p><p>   (3)在任何时候、任何情况下都不会向任何第三方出售您的个人信息，我们只会在法律允许的范围内使用根据本协议获得的信息。我们会制定严格的政策保护您的个人信息，除非事先获得您的授权或本声明另有规定之外，不会将您的这些信息对外公开或向第三方提供。</p><p><strong>   4.我们不会将您的个人信息转移或披露给任何非关联的第三方，除非:</strong></p><p>   (1)相关法律法规、法律程序、政府机关的强制性要求;</p><p>   (2)为完成合并、分立、收购或资产转让而转移</p><p>   (3)事先获得您的授权;(4)您使用共享功能;</p><p>   (5)以学术研究或公共利益为目的;</p><p>   (6)在法律法规和政策允许的范围内，为提升用户体验和提供个性化的推广服务;</p><p><strong>   5.您同意发布的游记不包含下列信息:</strong></p><p>   (1)反对宪法确定的基本原则的;</p><p>   (2)危害国家安全，泄露国家秘密的;</p><p>   (3)颠覆国家政权，推翻社会主义制度，煽动分裂国家，破坏国家统一的;</p><p>   (4)损害国家荣誉和利益的；</p><p>   (5)宣扬恐怖主义、极端主义的;</p><p>   (6)宣扬民族仇恨、民族歧视，破坏民族团结的;</p><p>   (7)煽动地域歧视、地域仇恨的;</p><p>   (8)破坏国家宗教政策，宣扬邪教和封建迷信的;</p><p>   (9)编造、散布谣言、虚假信息，扰乱经济秩序和社会秩序、破坏社会稳定的;</p><p>   (10)散布、传播淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的;</p><p>   (11)危害网络安全、利用网络从事危害国家安全、荣誉和利益的;</p><p>   (12)侮辱或者诽谤他人，侵害他人合法权益的</p><p>   (13)对他人进行暴力恐吓、威胁，实施人肉搜索的;</p><p>   (14)涉及他人隐私、个人信息或资料的;</p><p>   (15)散布污言秽语，损害社会公序良俗的;</p><p>   (16)侵犯他人隐私权、名誉权、肖像权、知识产权等合法权益内容的;</p><p>   (17)侵害未成年人合法权益或者损害未成年人身心健康的;</p><p>   (18)未获他人允许，偷拍、偷录他人，侵害他人合法权利的;</p>`;
      } else {
        this.doc = `<p>  本软件尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本软件会按照本隐私权政策的规定使用和披露您的个人信息。但本软件将以高度的勤勉、审慎义务对待这些信息。</p><p>    除本隐私权政策另有规定外，在未征得您事先许可的情况下，本软件不会将这些信息对外披露或向第三方提供。本软件会不时更新本隐私权政策。</p><p>    您在同意本软件服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本软件服务使用协议不可分割的一部分。</p><p><strong>   1. 我们如何搜集您的信息?</strong></p><p>   我们提供服务时，可能会收集、储存和使用下列信息:</p><p>   1.1您提供的信息</p><p>   (1)您在注册账户或使用我们的服务时，向我们提供的相关个人信息，例如您的电子电话号码等信息。如果您想充分使用我们提供的各种分享功能，可能还需要创建公开显示的个人资料，其中可能会包含您的姓名和照片。</p><p>   (2)您通过我们的服务向其他方提供的共享信息，以及您使用我们的服务时上传、提交、存储、发送或接收的信息。</p><p>   1.2您在使用服务过程中，我们获取的信息</p><p>   我们会收集您使用的服务以及使用方式的信息，此类信息包括:</p><p>   (1)设备信息:我们会收集设备专用的信息，例如您的硬件型号、操作系统信息、移动设备版本、设备识别码、屏幕分辨率等信息。                         </p><p>   (2)日志信息</p><p>   A设备或软件信息，例如您的移动设备、网页浏览器或用于接入我们服务的其他程序所提供的配置信息、您的IP地址和移动设备所用的版本和设备识别码;</p><p>   B.在使用我们服务时搜索或浏览的信息，例如您使用的网页搜索词语、访问的社交媒体页面URL地址，以及您在使用我们服务时浏览或要求提供的其他信息和内容详情;</p><p>   (3)IP地址</p><p>   A.有关您曾使用的移动应用(APP)和其他软件的信息，以及您曾经使用该等移动应用和软件的信息;</p><p>   B.您通过我们的服务分享的内容所包含的信息(元数据)，例如拍摄或上传的共享照片或录像的日期、时间或地点等。</p><p><strong>   2.我们如何使用您的信息</strong></p><p>   我们可能将上述收集的信息用作以下用途:</p><p>   (1)向您提供服务;</p><p>   (2)在我们提供服务时，用于身份验证、客户服务、安全防范、存档和备份用途，确保我们向您提供的产品和服务的安全性;</p><p>   (3)帮助我们设计新服务，改善我们现有服务;</p><p>   (4)使我们更加了解您如何接入和使用我们的服务，从而针对性地回应您的个性化需求，例如语言设定、位置设定、个性化的帮助服务和指示，或对您和其他用户作出其他方面的回应;</p><p>   (5)向您提供与您更加相关的广告以替代普遍投放的广告;</p><p>   (6)执行软件验证、升级服务;</p><p>   (7)应用户特殊要求而提供特定服务时，需要将信息提供给我们的关联公司、第三方或其他用户;</p><p>   (8)其他有利于用户和App运营者利益且不违反任何强制性法律法规的情况。</p><p>   (9)让您参与有关我们产品和服务的调查</p><p><strong>   3.我们承诺</strong></p><p>   (1)我们不会根据敏感类别(例如种族、宗教、性取向或健康状况)向您展示个性化广告;</p><p>   (2)我们不会与广告主分享可用于识别您个人身份的信息，例如您的姓名(除非经您授权同意);</p><p>   (3)在任何时候、任何情况下都不会向任何第三方出售您的个人信息，我们只会在法律允许的范围内使用根据本协议获得的信息。我们会制定严格的政策保护您的个人信息，除非事先获得您的授权或本声明另有规定之外，不会将您的这些信息对外公开或向第三方提供。</p><p><strong>   4.我们不会将您的个人信息转移或披露给任何非关联的第三方，除非:</strong></p><p>   (1)相关法律法规、法律程序、政府机关的强制性要求;</p><p>   (2)为完成合并、分立、收购或资产转让而转移</p><p>   (3)事先获得您的授权;(4)您使用共享功能;</p><p>   (5)以学术研究或公共利益为目的;</p><p>   (6)在法律法规和政策允许的范围内，为提升用户体验和提供个性化的推广服务;</p><p><strong>   `;
      }
      this.showProp = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-image: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/login-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 416rpx;
  .logo {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 24rpx;
  }
  .title {
    font-size: 96rpx;
    font-weight: 700;
    color: #ffffff;
    line-height: 96rpx;
  }
}
.footer {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  .footer-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 670rpx;
    height: 88rpx;
    background: #ffffff;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    image {
      width: 40rpx;
      height: 40rpx;
      flex: 0 0 auto;
      margin-right: 16rpx;
    }
    text {
      font-size: 28rpx;
      font-weight: 600;
      color: #ff5000;
      line-height: 88rpx;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    margin-bottom: 96rpx;
    margin-top: 156rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 34rpx;
    .form-radio {
      width: 32rpx;
      height: 32rpx;
      margin-right: 16rpx;
      background: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/form-radio1.png")
        no-repeat 0 0;
      background-size: 32rpx 32rpx;
      &.active {
        background: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/form-radio-active1.png")
          no-repeat 0 0;
        background-size: 32rpx 32rpx;
      }
    }
    text {
      font-size: 24rpx;
      font-weight: 400;
      color: #fff201;
      margin: 0 8rpx;
    }
    .radio {
      margin-right: 8rpx;
    }
  }
}
.popup-content {
  max-height: 80vh;
  position: relative;

  .popup-close {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    z-index: 1;
  }
  .title {
    width: 100%;
    height: 108rpx;
    font-size: 42rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    line-height: 108rpx;
    text-align: center;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  }
  .text {
    height: calc(900rpx - 108rpx);
    overflow: auto;
    font-size: 32rpx;
    padding: 24rpx;
    text-indent: 28rpx;
    line-height: 64rpx;
  }
  swiper.detail-banner-swiper {
    height: 360rpx;

    &::v-deep {
      .wx-swiper-dots {
        width: 100%;
        height: 120rpx;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.16) 100%
        );
        padding-top: 52rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
      }

      .wx-swiper-dot {
        width: 20rpx;
        height: 4rpx;
        margin: 0 6rpx;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 10rpx;
        opacity: 1;

        &.wx-swiper-dot-active {
          background: #ffffff;
          opacity: 1;
        }
      }
    }
  }
}
</style>
